<template>
    <div class="order">
        <p class="p1">提货点</p>
        <p class="p2" v-if="headshow">
            <el-menu  :default-active="actives" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="0">{{header.show.name}}({{header.show.num}})</el-menu-item>
            <el-menu-item index="1">{{header.hide.name}}({{header.hide.num}})</el-menu-item>
            <el-menu-item index="2">{{header.recycle.name}}({{header.recycle.num}})</el-menu-item>
            </el-menu>
        </p>


            <div class="div1">

                <p class="p2">
                    <span class="s2">
                        <span>提货点搜索：</span>
                        <el-input size="small" class="inps" v-model="input" placeholder="请输入提货点名称,电话"></el-input>
                        <el-button size="small" type="primary" @click="inputFun" icon="el-icon-search"></el-button>
                    </span>
                </p>

            <p class="p3">
                <el-button @click="pickFun" size="small" type="primary" icon="el-icon-plus">添加提货单</el-button>
            </p>

                <el-table
                    v-loading="loading"
                    size="small"
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                    <el-table-column
                    type="selection"
                    width="55">
                    </el-table-column>
                    <el-table-column
                    label="ID"
                    width="50">
                    <template slot-scope="scope">{{ scope.row.id }}</template>
                    </el-table-column>
                    <el-table-column
                    label="提货点图片"
                    width="120">
                        <template slot-scope="scope">
                            <img :src="scope.row.image" style="width:40px;height:40px;" alt="">
                        </template>
                    </el-table-column>
                    <el-table-column
                    prop="name"
                    label="提货名称"
                    width="100">
                    </el-table-column>

                    <el-table-column
                    prop="phone"
                    label="提货电话"
                    width="100"
                    >
                    </el-table-column>

                    <el-table-column
                    prop="detailed_address"
                    label="地址"
                    width="100"
                    >
                    </el-table-column>

                    <el-table-column
                    prop="day_time"
                    label="营业时间"
                    width="180"
                    >
                    </el-table-column>

                    <el-table-column
                    label="是否显示"
                    width="100"
                    >
                    <template slot-scope="scope">

                        <div class="ds">
                            <el-tooltip :content="'ID value: ' + scope.row.id" placement="top">
                            <el-switch
                                width="66"
                                v-model="scope.row.is_show"
                                active-color="#1b80e6"
                                inactive-color="#ccc"
                                :active-value="1"
                                :inactive-value="0"
                                @change="switchFun(scope.row)">
                            </el-switch>
                            </el-tooltip>
                            <span :class="scope.row.is_show === 1 ? 'ss' : 'sss'">{{ scope.row.is_show === 1 ? '显示' : '隐藏' }}</span>
                        </div>
                        
                        
                        
                    </template>
                    </el-table-column>
                    
                    <el-table-column label="操作" fixed="right" width="140">
                    <template slot-scope="scope">
                        <el-button type="text" size="mini" @click="editFun(scope.row)">编辑</el-button>
                        <el-button type="text" size="mini" @click=" scope.row.is_del === 0 ? delFun(scope.row) : huiFun(scope.row) ">{{ scope.row.is_del === 0 ? '删除' : '恢复' }}</el-button>
                    </template>
                    </el-table-column>

                </el-table>

                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                @prev-click="prevFun"
                @next-click='nextFun'
                :current-page="page"
                :page-sizes="[5, 7, 10, 15]"
                :page-size="limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
                </el-pagination>
            </div>

            <!-- 遮罩层 -->
            <Markone :form='form' @addVal='addVal'></Markone>
    </div>
</template>

<script>
import Markone from '../../components/pickups/pickup_mark.vue'
import {pickupheader,pickuplist,pickupstatus,pickupdel} from '../../api/pickuper/pickuper'
import moment from 'moment'
import { format } from 'echarts'
export default {
    inject:['reload'],
    components:{
        Markone
    },
    data(){
        return {
            tableData:[
            ],
            multipleSelection: [],
            page:1,
            limit:5,
            total:0,
            input:'',
            actives:'0',
            active:'0',
            header:{},
            headshow:false,
            loading:true,
            form:{
                pickname:'',
                dialogFormVisible: false,
                title:'添加提货点',
                pickjie:'',
                pickphone:'',
                pickplace:'',
                pickplaces:'',
                date:'',
                img:'',
                longitude:'',
                id:0
            }
        }
    },
    created(){
        this.pickupheader()
        this.pickuplists()
    },
    methods: {
        //编辑
        editFun(val){
            this.form.title = '编辑提货点';
            this.form.dialogFormVisible = true;
            this.form.pickname = val.name;
            this.form.pickjie = val.introduction;
            this.form.pickphone = val.phone;
            this.form.pickplace = val.address.split(',');
            //console.log(val.address);
            this.form.pickplaces = val.detailed_address;

            this.form.date = val.day_time.split(' - ');
            this.form.date[0] = new Date(new Date('2021/06/01').getTime() + this.onChangeTimer(this.form.date[0]))
            this.form.date[1] = new Date(new Date('2021/06/01').getTime() + this.onChangeTimer(this.form.date[1]))

            this.form.img = val.image;
            this.form.longitude = val.longitude + ',' + val.latitude;
            this.form.id = val.id;
        },
        //时间转换时间戳
        onChangeTimer(timeString){
            let sendtime = '';
            if (timeString !==null) {
                let hour = timeString.split(":")[0];
                let min = timeString.split(":")[1];
                let sec = timeString.split(":")[2];
                sendtime = Number(hour * 60 * 60 ) + Number(min * 60) + Number(sec);
            }
            return sendtime;
        },
        //添加成功
        addVal(val){
            this.loading = true;
            this.form.dialogFormVisible = val;
            this.pickupheader()
            this.pickuplists()
        },
        //数据恢复
        huiFun(val){
            this.$confirm('确定要恢复提货点吗? 请谨慎操作！', '恢复提货点', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                pickupdel(val.id).then(res => {
                    if (res.data.status === 200) {
                        this.loading = true;
                        this.$message.success(res.data.msg)
                        this.pickuplists();
                        this.pickupheader()
                    }else{
                        this.$message.error(res.data.msg)
                    }
                },err => {
                    console.log(err);
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消恢复'
                });          
            });
        },
        //数据删除
        delFun(val){
            this.$confirm('确定要删除提货点吗? 删除提货点后将无法恢复，请谨慎操作！', '删除提货点', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                pickupdel(val.id).then(res => {
                    if (res.data.status === 200) {
                        this.loading = true;
                        this.$message.success(res.data.msg)
                        this.pickuplists();
                        this.pickupheader()
                    }else{
                        this.$message.error(res.data.msg)
                    }
                },err => {
                    console.log(err);
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        //switch状态
        switchFun(val){
            pickupstatus({ids:val.id,status:val.is_show}).then(res => {
                //console.log(res.data);
                if (res.data.status === 200) {
                    this.loading = true;
                    this.$message.success(res.data.msg)
                    this.pickuplists();
                    this.pickupheader()
                }else{
                    this.$message.error(res.data.msg)
                }
            },err => {
                console.log(err);
            })
        },
        //数据获取
        pickuplists(){
            pickuplist({page:this.page,limit:this.limit,type:this.active,key:this.input}).then(res => {
                console.log(res.data);
                if (res.data.status === 200) {
                    this.tableData = res.data.data.list
                    this.total = res.data.data.count
                    this.loading = false
                    this.$message.success('数据获取成功！')
                }else{
                    this.$message.error('数据获取失败！')
                }
            },err => {
                console.log(err);
            })
        },
        //头部数据获取
        pickupheader(){
            pickupheader().then(res => {
                if (res.data.status === 200) {
                    //console.log(res.data);
                    this.header = res.data.data.count
                    this.headshow = true
                }
            },err => {
                console.log(err);
            })
        },
        //提货点搜索
        inputFun(){
            this.loading = true
            this.pickuplists()
        },
        //添加提货点
        pickFun(){
            this.form.dialogFormVisible = true;
        },
        handleSizeChange(val) {
        this.limit = val;
        this.pickuplists()
      },
      handleCurrentChange(val) {
        this.page = val
        this.pickuplists()
      },
      prevFun(val) {
        this.page = val
        this.pickuplists()
      },
      nextFun(val) {
        this.page = val
        this.pickuplists()
      },
        toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleSelect(key, keyPath) {
        //console.log(key);
        this.active = key;
        this.loading = true
        this.pickuplists()
      },
    }
}
</script>

<style lang="scss">

.ds{
    width: 100%;
    height: 100%;
    position: relative;
    .ss{
        position: absolute;
        top: 0px;
        left: 26px;
        color: white;
    }
    .sss{
        position: absolute;
        top: 0px;
        left: 26px;
        color: rgb(41, 126, 238);
        font-weight: bold;
    }
}

.order{
    width: 100%;
    height: 100%;
    background: #f5f7f9;
    padding: 0 20px;
    box-sizing: border-box;
}
    .p1{
        width: 100%;
        height: 50px;
        font-size: 18px;
        display: flex;
        align-items: center;
        background: white;
        padding: 0 8px;
        box-sizing: border-box;
    }
    .p2{
        width: 100%;
        height: 50px;
        background: white;
    }

    .div1{
        width: 100%;
        height: 500px;
        margin-top: 20px;
        .p2{
                width: 100%;
                height: 50px;
                display: flex;
                justify-content:start;
                align-items: center;
                padding: 36px 20px;
                box-sizing: border-box;
            }
            .p3{
                width: 100%;
                height: 40px;
                display: flex;
                align-items: center;
                padding: 0 20px;
                box-sizing: border-box;
                background: white;
            }
    }

.div1>.p2>span:nth-child(1){
    width: 36%;
    height: 100%;
    display: flex;
    align-items: center;
    .inps{
        width: 66%;
    }
    span{
        flex: 1;
        display: block;
        height: 100%;
        display: flex;
        white-space: nowrap;
        align-items: center;
    }
}

    .divs{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        p{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

    .xiang{
        width: 100%;
        height: 80px;
        background: #f1f1f1;
        display: flex;
        flex-wrap: wrap;
        padding: 0 8px;
        box-sizing: border-box;
        div{
            width: 33.3%;
            height: 40px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }
    }
    
    .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }

  .div_one{
      display: flex;
      align-items: center;
  }
  .inps{
      width: 80%;
  }
</style>